<template>
  <el-card
    class="state-current-card state-card"
    v-loading="loading">
    <div class="state-card-head">IP:{{ dataForm.ip }}</div>
    <div class="state-chard-charts">
      <el-row :gutter="0">
        <el-col
          :span="12"
          class="gauge-wrapper">
          <div class="gauge-vertical"/>
          <div class="gauge-title">内存</div>
          <p>
            <el-progress
              type="circle"
              :percentage="memoryPercent"
              :show-text="true"
              :stroke-width="15"
            />
            <!--            <midea-gauge :percent="memoryPercent"></midea-gauge>-->
          </p>

          <div class="gauge-title">CPU</div>
          <p>
            <el-progress
              type="circle"
              :percentage="cpuPercent"
              :show-text="true"
              :stroke-width="15"
            />
          </p>

          <!--          <ve-gauge-->
          <!--            :data="memoryChartData"-->
          <!--            :settings="gaugeChartSettings"-->
          <!--          ></ve-gauge>-->
        </el-col>

        <el-col
          :span="12"
          class="gauge-wrapper">
          <div class="gauge-title">硬盘</div>
          <p>
            <ve-pie
              :data="diskChartData"
              :settings="{
                dataType: 'percent',
                // itemStyle: {
                //   color: {}
                // }
              }"
            />
            <!--            <el-progress-->
            <!--              type="circle"-->
            <!--              :percentage="diskPercent"-->
            <!--              :show-text="true"-->
            <!--              :stroke-width="15"-->
            <!--            ></el-progress>-->
          </p>
          <!--          <ve-gauge-->
          <!--            :data="diskChartData"-->
          <!--            :settings="gaugeChartSettings"-->
          <!--          ></ve-gauge>-->
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>
import sysStateMixins from '@/mixins/sys-state/sys-state.mixins'
import MideaGauge from '../../../components/midea-gauge'
export default {
  name: 'StateCurrentCard',
  components: { MideaGauge },
  mixins: [sysStateMixins],
  props: {
    ip: {
      type: String,
      default: null
    }
  },

  data () {
    return {
      disks: [],
      memories: [],
      diskPercent: 0,
      memoryPercent: 0,
      cpuPercent: 0,
      diskChartData: {
        columns: ['type', 'value'],
        rows: [{ type: '占用', value: 0 }]
      },
      memoryChartData: {
        columns: ['type', 'value'],
        rows: [{ type: '内存', value: 0 }]
      },

      gaugeChartSettings: {
        seriesMap: {
          内存: {
            startAngle: 200, // 开始角度
            endAngle: -20, // 结束角度
            radius: '60%',
            min: 0,
            max: 100,
            splitLine: {
              // 分割线
              show: false
            },
            axisLine: {
              lineStyle: {
                // color: [[0.3, '#eeeeee'], [0.7, '#cccccc'], [1, 'red']],
                width: 30
              }
            },
            axisTick: {
              // 分段的标记
              show: true
            },
            axisLabel: {
              // 分段的文字
              // show:false,
            },
            pointer: {
              // 指针样式
            },
            detail: {
              formatter: '{value}%'
            }
          },
          占用: {
            startAngle: 200, // 开始角度
            endAngle: -20, // 结束角度
            radius: '60%',
            splitLine: {
              // 分割线
              show: false
            },
            axisLine: {
              lineStyle: {
                // color: [[0.3, '#eeeeee'], [0.7, '#cccccc'], [1, 'red']],
                width: 30
              }
            },
            axisTick: {
              // 分段的标记
              show: true
            },
            axisLabel: {
              // 分段的文字
              // show:false,
            },
            pointer: {
              // 指针样式
            },
            detail: {
              formatter: '{value}%'
            }
          }
        }
      }
    }
  },
  computed: {},
  beforeMount () {
    this.dataForm.ip = this.ip
    this.dataForm.timeUnit = 'min'
    this.dataForm.limit = 1
    // get current min =

    let timeValues = this.todayFormat()
    this.dataForm = {
      ...this.dataForm,
      ...timeValues
    }
  },
  mounted () {
    Promise.all([this.loadMemories(), this.loadDisks(), this.loadCpu()]).then(
      () => {
        this.handleMemoryValue()
        this.handleDiskValue()
        this.handleCpuValue()
      }
    )
  },
  methods: {
    handleCpuValue () {
      if (this.cpus && this.cpus.length > 0) {
        let model = this.cpus[0]
        let value = Number(
          Number.parseFloat(model.systemCpuTotalNormPct * 100).toFixed(0)
        )

        this.cpuPercent = value
      }
    },
    handleDiskValue () {
      if (this.disks && this.disks.length > 0) {
        let model = this.disks[0]
        let value = Number(Number.parseFloat(model.usedPct * 100).toFixed(0))
        let freeValue = Number(
          Number.parseFloat((1 - model.usedPct) * 100).toFixed(0)
        )
        this.diskChartData = {
          columns: ['type', 'value'],
          rows: [
            { type: '占用', value: value },
            { type: '空闲', value: freeValue }
          ]
        }
        this.diskPercent = value
      }
    },
    handleMemoryValue () {
      if (this.memories && this.memories.length > 0) {
        let model = this.memories[0]
        let value = Number(
          Number.parseFloat(model.actualUsedPct * 100).toFixed(0)
        )
        // this.memoryChartData = {
        //   columns: ['type', 'value'],
        //   rows: [{ type: '内存', value: value }]
        // }
        this.memoryPercent = value
      }
    }
  }
}
</script>

<style scoped lang="scss">
.state-current-card {
  .state-card-head {
    text-align: center;
    font-size: 20px;
    font-weight: 300;
    padding-bottom: 30px;
    border-bottom: 1px solid #cccccc;
    margin-bottom: 30px;
  }
  .gauge-wrapper {
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .gauge-title {
      /*position: absolute;*/
      /*top: 0;*/
      /*left: 0;*/
      /*width: 100%;*/
      /*text-align: center;*/
      width: 100%;
      text-align: center;
      font-size: 18px;
    }
    p {
      width: 100%;
      justify-content: center;
      text-align: center;
    }
  }
}
</style>
